import React from 'react'
import './rate.css'
import graySrc from '../../../res/images/web/vote/爱心-灰@2x.png'
import lightSrc from '../../../res/images/web/vote/爱心-红@2x.png'
const log = console.log.bind(console)
class Rate extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        const count = this.props.count
        const value = this.props.value
        const array = []
        for (let i = 0; i < count; i++) {
            if (i < value) {
                array.push(true)
            } else {
                array.push(false)
            }
        }
        return <div
            className='rate-container'
        >
            {array.map((light, index) => {
                const lightTemplate = <img
                    alt=''
                    src={lightSrc}
                    style={{
                        width: '40px',
                        position: 'absolute',
                        transition: 'opacity 0.5s',
                        opacity: light ? 1 : 0,
                        left: 0,
                        top: 0,
                    }}
                />
                return <div
                    key={index}
                    style={{position: 'relative',}}
                    onClick={() => {
                        if (this.props.disabled) {
                            return
                        }
                        this.props.setRate(index + 1)
                    }}
                >
                    <img
                        src={graySrc}
                        style={{width: '40px'}}
                        alt=''
                    />
                    {lightTemplate}
                </div>
            })}
        </div>
    }
}

export default Rate